<script>
export default {
  name: "PersonDetail",
  data() {
    return {
      detail: {},
      url: "",
    };
  },
  mounted() {
    this.detail = this.$store.state.user;
    this.url = "http://localhost:8080/" + this.$store.state.user.photo;
  },
};
</script>

<template>
  <el-descriptions class="margin-top" style="width:100px" >
    <el-descriptions-item>
      <!-- <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工照片
        </div>
      </template> -->
      <el-image style="width: 100px" :src="url"></el-image>
    </el-descriptions-item>
  </el-descriptions>
  <el-descriptions class="margin-top" :column="2" :size="size" border>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon >
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ detail.name }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          性别
        </div>
      </template>
      {{ detail.gender }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          员工账户名
        </div>
      </template>
      {{ detail.username }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          员工职位
        </div>
      </template>
      {{ detail.job }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          所属社区
        </div>
      </template>
      {{ detail.userCommunityName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          入职时间
        </div>
      </template>
      {{ detail.joinTime }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          年龄
        </div>
      </template>
      {{ detail.age }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          手机号
        </div>
      </template>
      {{ detail.phone }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<style>
.cell-item {
  width:120px;
}
</style>